<!--
 * @Author: fisher
 * @Date: 2023-07-31 14:28:38
 * @LastEditTime: 2024-01-10 11:39:33
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \front-end-template\src\modules\DataManage\templates\index.vue
-->
<template>
  <div class="template">
    <fks-breadcrumb class="breadcrumb" separator-class="fks-icon-arrow-right">
      <fks-breadcrumb-item>
        <span
          style="cursor: pointer; font-size: 16px; font-weight: bold"
          :class="{ breadcrumbHandle: currentWarehouseId }"
          @click="checkwarehouse"
          >模板管理</span
        >
      </fks-breadcrumb-item>
      <fks-breadcrumb-item v-if="currentWarehouseId">
        <span style="cursor: pointer; font-size: 16px; font-weight: bold">{{
          currentWarehouseData.warehouseName
        }}</span>
      </fks-breadcrumb-item>
    </fks-breadcrumb>
    <!-- 分割线 -->
    <!-- <div class="divider"></div> -->
    <!-- 仓库 -->
    <warehouse
      v-if="!currentWarehouseId"
      class="warehouse"
      @toDetails="toDetails"
    />
    <templates
      v-if="currentWarehouseId"
      class="templates"
      :warehouseData="currentWarehouseData"
    />
  </div>
</template>

<script>
import warehouse from "./modules/warehouse.vue";
import templates from "./modules/templates.vue";
export default {
  components: { warehouse, templates },
  data() {
    return {
      currentWarehouseId: "",
      currentWarehouseData: {},
    };
  },
  computed: {},
  mounted() {},
  destroyed() {},
  methods: {
    toDetails(val) {
      if (val) {
        this.currentWarehouseData = Object.assign({}, val);
        this.currentWarehouseId = val.id;
      }
    },
    checkwarehouse() {
      this.currentWarehouseId = "";
      this.currentWarehouseData = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.template {
  padding: 0 40px;
  user-select: none;
  overflow: hidden;
}

.breadcrumb {
  padding: 47px 0 0 0;
}
// .divider {
//   width: 100%;
//   height: 1px;
//   background-color: rgba($color: #000, $alpha: 0.1);
// }
.warehouse,
.templates {
  height: calc(100% - 70px);
}
.breadcrumbHandle {
  color: #1990ff;
}
</style>
